<template>

	<view class="container">
		<view class="title">
			已自动为您匹配到一下摄影师
		</view>
		
		<copyRedBook :list="list" style="padding: 0;"></copyRedBook>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				// 作品集数据
				list: [{
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'
				
				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'
				
				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'
				
				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'
				
				}, {
					// 作品id,
					id: '112253',
					// 点赞状态
					likeState: false,
					// 点赞数
					likeCount: 590,
					// 价格
					price: 100,
					// 距离
					location: 200,
					// 头像,
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					// 标题
					title: '海边拍照姿势合集，去海边去海边',
					// 商家名
					name: '柯文日常',
					imgUrl: '../../static/摆台定制.jpg'
				
				}, ]
			};
		},
		methods:{
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 20rpx;

		.title {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			background-color: deepskyblue;
			color: #fff;
			border-radius: 10rpx;
		}

		.middle {
			display: flex;
			justify-content: space-around;
			height: 480rpx;
			margin: 20rpx 0;

			.left {
				flex: 1.5;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				border: 2px solid red;
				padding-left: 10rpx;
				border-radius: 10rpx;

				.works {
					width: 200rpx;
					height: 250rpx;
					border: 2px solid $uni-border-color;
					font-size: 35px;
					text-align: center;
					line-height: 120rpx;
					border-radius: 10rpx;
				}

				.avatar-box {
					display: flex;

					.avatar {
						height: 30rpx;
						width: 30rpx;
						border-radius: 50%;
						border: 1px solid #ccc;
					}

					.name {
						height: 30rpx;
						width: 100rpx;
						border: 1px solid #ccc;
						margin-left: 10rpx;
					}
				}

				.price-goodStyle {
					.price {
						background-color: deepskyblue;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						color: #fff;
					}

					.goodStyle {
						background-color: deepskyblue;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						color: #fff;
						padding: 10rpx 20rpx;
						margin-left: 20rpx;
					}
				}
			}

			.right {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 10rpx;

				.right-box {
					border: 2px solid red;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 300rpx;
			border: 2px solid red;
		}
		.upPull{
			text-align: center;
			margin-top: 30rpx;
			color: #ccc;
		}
	}
</style>